﻿@using Common
@using Models.View
@model List<Models.View.IndexModel>
@{
    ViewData["Title"] = "Home Page";
}

<div style="height: 119px; margin: 0">
    <img alt="" width="100%" height="119px" src="xiaomi/head.jpg" />
</div>


<div class="daohanglan">
    <div class="dhl">
        <div class="dhlleft">
            @foreach (var item in @Model.Where(o => o.Position.Equals(".dhlleft") && o.ThisType).ToList().ListSort((a, b) => a.Sort > b.Sort ? 1 : -1))
            {
                <a class="@item.Url">@item.Text</a>
                <span style="margin: 0 .1em; color: #424242">丨</span>
            }
            <a class="aaa">Select Region</a>
        </div>
        <div class="dhlright">
            <div id="gwc" class="gouWuChe" style="float: right;" onmouseover="over()" onmouseout="out()">
                <div style="float: left;margin-left: 15px;">
                    <i style="font-size: 24px" class="iconfont">&#xe628;</i>
                </div>
                <div style="float: left;margin-left: 3px;">
                    @foreach (var item in @Model.Where(o => o.Position.Equals("#gwc") && o.ThisType).ToList().ListSort((a, b) => a.Sort > b.Sort ? 1 : -1))
                    {
                        <a>@item.Text</a>
                    }
                </div>
            </div>

            <div style="float: right; margin-right: 20px;">
                @foreach (var item in @Model.Where(o => o.Position.Equals(".dhlright div:eq(1)") && o.ThisType).ToList().ListSort((a, b) => a.Sort > b.Sort ? 1 : -1))
                {
                    <a class="aaa" href="@item.Url">@item.Text</a>
                    <span style="margin: 0em; color: #424242">丨</span>
                }
            </div>
        </div>
    </div>
</div>
<div id="middle" style="width: 1226px;margin: 0 auto;">
    <div class="aab">
        <div style="float: left; height: 100%;">
            @foreach (var item in @Model.Where(o => o.Position.Equals("#middle .aab div:eq(0)") && !o.ThisType).ToList().ListSort((a, b) => a.Sort > b.Sort ? 1 : -1))
            {
                <img alt="" style="margin-top: 24px;" src="@item.Url">
            }
        </div>
        <div style="float: left; height: 100%; margin-left: 50px;">
            @foreach (var item in @Model.Where(o => o.Position.Equals("#middle .aab div:eq(1)") && !o.ThisType).ToList().ListSort((a, b) => a.Sort > b.Sort ? 1 : -1))
            {
                <img alt="" style="margin-top: 23px;" src="@item.Url">
            }
        </div>
        <div class="aac" style="margin-left: 30px;">
            @foreach (var item in @Model.Where(o => o.Position.Equals("#middle .aab .aac") && o.ThisType).ToList().ListSort((a, b) => a.Sort > b.Sort ? 1 : -1))
            {
                <a class="aaa" href="@item.Url">@item.Text</a>
            }
        </div>
        <div id="sou" style="float: right;margin-top: 26px;position: relative;">
            <input type="text" style="float: left; height:48px;width:250px;" placeholder="小米8" />
            <div id="search" style="float: left;height: 50px;width: 50px;border:#E0E0E0 1px solid;border-left: none;color: #E0E0E0; ">
                <i style="font-size:18px;line-height: 50px;margin-left: 18px" class="iconfont">&#xe63e;</i>

            </div>
        </div>
        <div id="gwcplus" style="position:absolute;z-index:999;width: 310px;height: 100px;line-height: 100px;text-align: center; right: 0px;top: 0px;background-color: rgb(251,251,251);display: none;box-shadow:1px 1px 2px #333">
            购物车中还没有商品，赶紧选购吧！
        </div>

    </div>
    <div id="lunbo">
        <div id="container">
            <div id="list" style="left: -1226px">
                @foreach (var item in @Model.Where(o => o.Position.Equals("#lunbo #list") && !o.ThisType).ToList().ListSort((a, b) => a.Sort > b.Sort ? 1 : -1))
                {
                    <img alt="" src="@item.Url">
                }
            </div>
            <div id="buttons">
                <span index="1" class="on"></span>
                <span index="2"></span>
                <span index="3"></span>
                <span index="4"></span>
            </div>
            <div class="arrow" id="pre">
                <a style="color: #fff;text-decoration: none;" href="javascript:;"><</a>
            </div>
            <div class="arrow" id="next">
                <a style="color: #fff;text-decoration: none;" href="javascript:;">></a>
            </div>
        </div>
        <style type="text/css">
            #container {
                width: 1226px;
                height: 460px;
                border: none;
                position: relative;
                overflow: hidden;
            }

            #list {
                /*6张图片*/
                width: 7356px;
                height: 460px;
                position: absolute;
                z-index: 1;
            }

            #list img {
                float: left;
                width: 1226px;
                height: 460px;
            }

            #buttons {
                position: absolute;
                height: 10px;
                width: 100px;
                z-index: 10;
                bottom: 20px;
                right: 100px;
            }

            #buttons span {
                cursor: pointer;
                float: left;
                border: 1px solid #fff;
                border-radius: 50%;
                height: 10px;
                width: 10px;
                margin-right: 5px;
                background: #333;
            }

            #buttons .on {
                background: orangered;
            }

            .arrow {
                display: block;
                cursor: pointer;
                line-height: 50px;
                text-align: center;
                font-size: 30px;
                width: 40px;
                height: 50px;
                position: absolute;
                z-index: 10;
                top: 210px;
                color: #fff;
                background-color: rgba(0, 0, 0, 0.3);
            }

            .arrow:hover {
                background-color: rgba(0, 0, 0, 0.7);
            }

            #pre {
                left: 234px;
            }

            #next {
                right: 0px;
            }
        </style>
        <script type="text/javascript">
            function g(id) {

                return document.getElementById(id);
            }
            window.onload = function () {
                var next = g("next");
                var list = g("list");
                var pre = g("pre");
                var buttons = g("buttons").getElementsByTagName("span");
                var len = 4;
                var index = 1;
                var interval = 3000;
                var animated = false;
                var timer; //全局变量
                /*按钮显示*/
                function showButton() {
                    for (var i = 0; i < buttons.length; i++) {
                        if (buttons[i].className == "on") {
                            buttons[i].className = "";
                            break;
                        }
                    }
                    buttons[index - 1].className = "on";
                }
                /*图片切换动画*/
                function animate(offset) {
                    if (offset == 0) {
                        return;
                    }
                    animated = true;
                    var newLeft = parseInt(list.style.left) + offset;
                    var time = 300; //位移总时间
                    var interval = 10; //位移间隔时间
                    var speed = offset / (time / interval); //每次位移量
                    function go() {
                        if ((speed < 0 && parseInt(list.style.left) > newLeft) || (speed > 0 && parseInt(list.style.left) < newLeft)) {
                            list.style.left = parseInt(list.style.left) + speed + 'px';
                            setTimeout(go, interval);
                        } else {
                            list.style.left = newLeft + 'px';
                            /*如果当前是第五张图，就跳到第一张图*/
                            if (newLeft > -200) {
                                list.style.left = -1226 * len + 'px';
                            }
                            if (newLeft < (-1226 * len)) {
                                list.style.left = '-1226px';
                            }
                            animated = false;
                        }
                    }
                    go();
                }
                next.onclick = function () {
                    if (index == 4) {
                        index = 1;
                    } else {
                        index += 1;
                    }
                    showButton()
                    if (!animated) {
                        animate(-1226);
                    }
                }
                pre.onclick = function () {
                    if (index == 1) {
                        index = 4;
                    } else {
                        index -= 1;
                    }
                    showButton();
                    if (!animated) {
                        animate(1226);
                    }
                }
                /*按钮切换*/
                for (var i = 0; i < buttons.length; i++) {

                    buttons[i].onclick = function () {
                        if (animated) {
                            return false;
                        }
                        if (this.className == "on") {
                            return false;
                        }
                        var myIndex = parseInt(this.getAttribute("index"));
                        var offset = 1226 * (myIndex - index);
                        animate(offset);
                        index = myIndex;
                        showButton();
                    }
                }
                /*自动切换*/
                function autoPlay() {
                    timer = setInterval(function () {
                        next.onclick();
                    }, interval);
                }
                function stop() {
                    clearInterval(timer);
                }
                g("container").onmouseover = stop;
                g("container").onmouseout = autoPlay;
                autoPlay();
            }
        </script>
        <div style="position:absolute;z-index:999;width: 1226px;height: 460px;top: 1px;left: 0px;">
            <div id="tan100" style="float: left; background: rgba(70, 70, 70, 0.6); height: 460px; width: 234px; color: rgb(251, 251, 251);">
                @{ List<IndexModel> tempModel = Model.Where(o => o.Position.Equals("#lunbo #tan100") && o.ThisType).ToList().ListSort((a, b) => a.Sort > b.Sort ? 1 : -1);
                }
                @for (int i = 0; i < tempModel.Count; i++)
                {
                    <div id=@Html.DisplayText("\"tan"+(i+1)+"()\"") @(i == 0 ? "style=\"margin-top: 20px\"" : "") class="aae" style="margin-top: 20px" onmouseover=@Html.DisplayText("\"t"+(i+1)+"over()\"") onmouseout=@Html.DisplayText("\"t"+(i+1)+"out()\"")>
                        @tempModel[i].Text
                        <i class="iconfont" style="font-size: 12px; margin-right: 20px; float: right;">&#xe636;</i>
                    </div>
                }
                @*<div id="tan1" class="aae" style="margin-top: 20px" onmouseover="t1over()" onmouseout="t1out()">
                        &emsp;&emsp;手机&ensp;电话卡
                        <i class="iconfont" style="font-size: 12px; margin-right: 20px; float: right;">&#xe636;</i>
                    </div>
                            <div id="tan2" class="aae" onmouseover="t2over()" onmouseout="t2out()">
                                &emsp;&emsp;电视&ensp;盒子
                                <i class="iconfont" style="font-size: 12px; margin-right: 20px; float: right;">&#xe636;</i>
                            </div>
                            <div id="tan3" class="aae" onmouseover="t3over()" onmouseout="t3out()">
                                &emsp;&emsp;笔记本&ensp;平板
                                <i class="iconfont" style="font-size: 12px; margin-right: 20px; float: right;">&#xe636;</i>
                            </div>*@

            </div>
            <div id="tan11" style="float: left;height: 460px; width: 992px;background-color: #fff;display: none;">
                <table>
                    <tr><th class="aal">小米8</th><th class="aal">小米8SE</th><th class="aal">小米8MIX2</th><th class="aal">小米8MIX</th></tr>
                    <tr><th class="aal">小米8</th><th class="aal">小米8SE</th><th class="aal">小米8MIX2</th><th class="aal">小米8MIX</th></tr>
                    <tr><th class="aal">小米8</th><th class="aal">小米8SE</th><th class="aal">小米8MIX2</th><th class="aal">小米8MIX</th></tr>
                    <tr><th class="aal">小米8</th><th class="aal">小米8SE</th><th class="aal">小米8MIX2</th><th class="aal">小米8MIX</th></tr>
                </table>
            </div>
            <div id="tan12" style="float: left;height: 460px; width: 992px;background-color: #fff;display: none;">
                <table>
                    <tr><th class="aal">电视</th><th class="aal">盒子</th><th class="aal">电视</th><th class="aal">盒子</th></tr>
                    <tr><th class="aal">电视</th><th class="aal">盒子</th><th class="aal">电视</th><th class="aal">盒子</th></tr>
                    <tr><th class="aal">电视</th><th class="aal">盒子</th><th class="aal">电视</th><th class="aal">盒子</th></tr>
                    <tr><th class="aal">电视</th><th class="aal">盒子</th><th class="aal">电视</th><th class="aal">盒子</th></tr>
                </table>
            </div>
            <div id="tan13" style="float: left;height: 460px; width: 992px;background-color: #fff;display: none;">
                <table>
                    <tr><th class="aal">笔记本</th><th class="aal">平板</th><th class="aal">笔记本</th><th class="aal">平板</th></tr>
                    <tr><th class="aal">笔记本</th><th class="aal">平板</th><th class="aal">笔记本</th><th class="aal">平板</th></tr>
                    <tr><th class="aal">笔记本</th><th class="aal">平板</th><th class="aal">笔记本</th><th class="aal">平板</th></tr>
                    <tr><th class="aal">笔记本</th><th class="aal">平板</th><th class="aal">笔记本</th><th class="aal">平板</th></tr>
                </table>
            </div>
            <div id="tan14" style="float: left;height: 460px; width: 992px;background-color: #fff;display: none;">
                <table>
                    <tr><th class="aal">家电</th><th class="aal">插线板</th><th class="aal">家电</th><th class="aal">插线板</th></tr>
                    <tr><th class="aal">家电</th><th class="aal">插线板</th><th class="aal">家电</th><th class="aal">插线板</th></tr>
                    <tr><th class="aal">家电</th><th class="aal">插线板</th><th class="aal">家电</th><th class="aal">插线板</th></tr>
                    <tr><th class="aal">家电</th><th class="aal">插线板</th><th class="aal">家电</th><th class="aal">插线板</th></tr>
                </table>
            </div>
            <div id="tan15" style="float: left;height: 460px; width: 992px;background-color: #fff;display: none;">
                <table>
                    <tr><th class="aal">出行</th><th class="aal">穿戴</th><th class="aal">出现</th><th class="aal">穿戴</th></tr>
                    <tr><th class="aal">出行</th><th class="aal">穿戴</th><th class="aal">出现</th><th class="aal">穿戴</th></tr>
                    <tr><th class="aal">出行</th><th class="aal">穿戴</th><th class="aal">出现</th><th class="aal">穿戴</th></tr>
                    <tr><th class="aal">出行</th><th class="aal">穿戴</th><th class="aal">出现</th><th class="aal">穿戴</th></tr>
                </table>
            </div>
            <div id="tan16" style="float: left;height: 460px; width: 992px;background-color: #fff;display: none;">
                <table>
                    <tr><th class="aal">智能</th><th class="aal">路由器</th><th class="aal">智能</th><th class="aal">路由器</th></tr>
                    <tr><th class="aal">智能</th><th class="aal">路由器</th><th class="aal">智能</th><th class="aal">路由器</th></tr>
                    <tr><th class="aal">智能</th><th class="aal">路由器</th><th class="aal">智能</th><th class="aal">路由器</th></tr>
                    <tr><th class="aal">智能</th><th class="aal">路由器</th><th class="aal">智能</th><th class="aal">路由器</th></tr>
                </table>
            </div>
            <div id="tan17" style="float: left;height: 460px; width: 992px;background-color: #fff;display: none;">
                <table>
                    <tr><th class="aal">电源&nbsp;配件</th><th class="aal">电源&nbsp;配件</th><th class="aal">电源&nbsp;配件</th><th class="aal">电源&nbsp;配件</th></tr>
                    <tr><th class="aal">电源&nbsp;配件</th><th class="aal">电源&nbsp;配件</th><th class="aal">电源&nbsp;配件</th><th class="aal">电源&nbsp;配件</th></tr>
                    <tr><th class="aal">电源&nbsp;配件</th><th class="aal">电源&nbsp;配件</th><th class="aal">电源&nbsp;配件</th><th class="aal">电源&nbsp;配件</th></tr>
                    <tr><th class="aal">电源&nbsp;配件</th><th class="aal">电源&nbsp;配件</th><th class="aal">电源&nbsp;配件</th><th class="aal">电源&nbsp;配件</th></tr>
                </table>
            </div>
            <div id="tan18" style="float: left;height: 460px; width: 992px;background-color: #fff;display: none;">
                <table>
                    <tr><th class="aal">个户</th><th class="aal">儿童</th><th class="aal">个户</th><th class="aal">儿童</th></tr>
                    <tr><th class="aal">个户</th><th class="aal">儿童</th><th class="aal">个户</th><th class="aal">儿童</th></tr>
                    <tr><th class="aal">个户</th><th class="aal">儿童</th><th class="aal">个户</th><th class="aal">儿童</th></tr>
                    <tr><th class="aal">个户</th><th class="aal">儿童</th><th class="aal">个户</th><th class="aal">儿童</th></tr>
                </table>
            </div>
            <div id="tan19" style="float: left;height: 460px; width: 992px;background-color: #fff;display: none;">
                <table>
                    <tr><th class="aal">耳机</th><th class="aal">音响</th><th class="aal">耳机</th><th class="aal">音响</th></tr>
                    <tr><th class="aal">耳机</th><th class="aal">音响</th><th class="aal">耳机</th><th class="aal">音响</th></tr>
                    <tr><th class="aal">耳机</th><th class="aal">音响</th><th class="aal">耳机</th><th class="aal">音响</th></tr>
                    <tr><th class="aal">耳机</th><th class="aal">音响</th><th class="aal">耳机</th><th class="aal">音响</th></tr>
                </table>
            </div>
            <div id="tan20" style="float: left;height: 460px; width: 992px;background-color: #fff;display: none;">
                <table>
                    <tr><th class="aal">生活</th><th class="aal">箱包</th><th class="aal">生活</th><th class="aal">箱包</th></tr>
                    <tr><th class="aal">生活</th><th class="aal">箱包</th><th class="aal">生活</th><th class="aal">箱包</th></tr>
                    <tr><th class="aal">生活</th><th class="aal">箱包</th><th class="aal">生活</th><th class="aal">箱包</th></tr>
                    <tr><th class="aal">生活</th><th class="aal">箱包</th><th class="aal">生活</th><th class="aal">箱包</th></tr>
                </table>
            </div>
        </div>
    </div>

    <div style="height: 170px; margin-top: 14px;">
        <div class="aaf" style="height: 170px;">
            <table>
                <tr>
                    <th class="aag"><i class="iconfont">&#xe618;</i><br />选购手机</th>
                    <th class="aag"><i class="iconfont">&#xe611;</i><br />企业团购</th>
                    <th class="aag"><i class="iconfont">&#xf003d;</i><br />F码通道</th>
                </tr>
                <tr>
                    <th class="aag"><i class="iconfont">&#xe733;</i><br />不限量卡</th>
                    <th class="aag"><i class="iconfont">&#xe607;</i><br />以旧换新</th>
                    <th class="aag"><i class="iconfont">&#xe62c;</i><br />话费充值</th>
                </tr>
            </table>

        </div>
        <div style="float: left;margin-left: 14px;">
            <img src="xiaomi/5.jpg" style="height: 170px;width: 316px;" />
        </div>
        <div style="float: left;margin-left: 15px;">
            <img src="xiaomi/6.jpg" style="height: 170px;width: 316px;" />
        </div>
        <div style="float: left;margin-left: 15px;">
            <img src="xiaomi/7.jpg" style="height: 170px;width: 316px;" />
        </div>
    </div>

    <div id="xiaomishangou" style="height: 610px;">
        <div style="font-size: 25px;margin-top: 26px;height: 58px;line-height: 58px;position: relative;">
            <div style="float: left;">小米闪购</div>
            <div style="float: right;height: 58px;">
                <i id="qq" class="iconfont" style="font-size: 30px;">&#xe787;</i>
                <i id="qq" class="iconfont" style="font-size: 30px;">&#xe786;</i>
            </div>
        </div>
        <div style="height: 340px;text-align:center">
            <div style="float: left;width: 234px;height: 340px; border-top-color: #e53935;border-top-style: solid;border-top-width: 1px;background-color:#f1eded;">
                <div style="font-size: 21px;color:#ef3a3b;padding-top: 54px;">18:00场</div>
                <div style="margin: 25px auto"><img src="xiaomi/shandian.png"></div>
                <div style="font-size: 15px;color: rgba(0,0,0,0.54);">距离开始还有</div>
                <div style="width: 168px;margin: 28px auto 0;font-size: 21px;" onload="FreshTime()">
                    <span id="LeftTime"></span>
                </div>
                <script type="text/javascript">
                    function FreshTime() {
                        var endtime = new Date("2018/12/19,21:29:12");//结束时间
                        var nowtime = new Date();//当前时间
                        var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000); // 剩余时间
                        d = parseInt(lefttime / 3600 / 24);   // 剩余天数
                        h = parseInt((lefttime / 3600) % 24); // 剩余小时数
                        m = parseInt((lefttime / 60) % 60); // 剩余分钟数
                        s = parseInt(lefttime % 60);    // 剩余秒数

                        document.getElementById("LeftTime").innerHTML = d + "天" + h + "时"
                            + m + "分" + s + "秒";

                        if (lefttime <= 0) {
                            document.getElementById("LeftTime").innerHTML = "团购已结束";
                            clearInterval(sh);
                        }
                    }
                    FreshTime()
                    var sh;
                    sh = setInterval(FreshTime, 1000);
                </script>

            </div>
            <div style="float: left;margin-left: 14px;padding-bottom: 40px;overflow: hidden;">
                <div style="white-space: nowrap;position: relative;">
                    <div class="aah" style="border-top-color: #ffac13;float: left;margin-right: 14px;">
                        <div class="aai">1元秒杀</div>
                        <div style="margin: 0 auto 22px;margin-top: 39px;"><img src="xiaomi/bi.png"></div>
                        <div style="font-size: 14px;color: #212121;">
                            小米水质TDS检测笔&ensp;白色
                        </div>
                        <div style="font-size: 12px;height: 18px;line-height: 18px; color: #b0b0b0;margin-top: 5px;">
                            准确检测家中水质纯度
                        </div>
                        <div style="font-size: 14px;margin-top: 15px;">
                            <a style="color: #ff6709;">1&nbsp;元&emsp;</a>
                            <a style="color: #b0b0b0;text-decoration: line-through;">39&nbsp;元</a>
                        </div>
                    </div>
                    <div class="aah" style="border-top-color: #83c44e;float: left;margin-right: 14px;">
                        <div class="aai">1元秒杀</div>
                        <div style="margin: 0 auto 22px;margin-top: 39px;"><img src="xiaomi/bi.png"></div>
                        <div style="font-size: 14px;color: #212121;">
                            小米水质TDS检测笔&ensp;白色
                        </div>
                        <div style="font-size: 12px;height: 18px;line-height: 18px; color: #b0b0b0;margin-top: 5px;">
                            准确检测家中水质纯度
                        </div>
                        <div style="font-size: 14px;margin-top: 15px;">
                            <a style="color: #ff6709;">1&nbsp;元&emsp;</a>
                            <a style="color: #b0b0b0;text-decoration: line-through;">39&nbsp;元</a>
                        </div>
                    </div>
                    <div class="aah" style="border-top-color: #2196f3;float: left;margin-right: 14px;">
                        <div class="aai">1元秒杀</div>
                        <div style="margin: 0 auto 22px;margin-top: 39px;"><img src="xiaomi/bi.png"></div>
                        <div style="font-size: 14px;color: #212121;">
                            小米水质TDS检测笔&ensp;白色
                        </div>
                        <div style="font-size: 12px;height: 18px;line-height: 18px; color: #b0b0b0;margin-top: 5px;">
                            准确检测家中水质纯度
                        </div>
                        <div style="font-size: 14px;margin-top: 15px;">
                            <a style="color: #ff6709;">1&nbsp;元&emsp;</a>
                            <a style="color: #b0b0b0;text-decoration: line-through;">39&nbsp;元</a>
                        </div>
                    </div>
                    <div class="aah" style="border-top-color: #e53935;float: left;">
                        <div class="aai">1元秒杀</div>
                        <div style="margin: 0 auto 22px;margin-top: 39px;"><img src="xiaomi/bi.png"></div>
                        <div style="font-size: 14px;color: #212121;">
                            小米水质TDS检测笔&ensp;白色
                        </div>
                        <div style="font-size: 12px;height: 18px;line-height: 18px; color: #b0b0b0;margin-top: 5px;">
                            准确检测家中水质纯度
                        </div>
                        <div style="font-size: 14px;margin-top: 15px;">
                            <a style="color: #ff6709;">1&nbsp;元&emsp;</a>
                            <a style="color: #b0b0b0;text-decoration: line-through;">39&nbsp;元</a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div style="height: 120px; position: relative;margin-top: 2px;padding-bottom: 42px;">
            <img width="1226px" height="120px" src="xiaomi/8.jpg">
        </div>
    </div>
</div>
<div id="main" style="background-color: #f5f5f5;height: 1500px;color: #333;padding-top: 22px;">
    <div style="width: 1226px;position: relative;margin: 0 auto;">
        <div style="height: 58px;line-height: 58px;position: relative;">
            <div style="float: left;font-size: 22px;">手机</div>
            <div style="float: right;font-size: 20px;">
                查看全部
                <i id="qq" class="iconfont" style="font-size: 20px;">&#xe508;</i>
            </div>
        </div>
        <div style="text-align: center;">
            <div style="float: left;">
                <img src="xiaomi/9.jpg" width="234px;">
            </div>
            <div style="float: left;margin-left: 14px;width: 978px;">
                <div>
                    <div class="aaj">
                        <div>
                            <img style="margin-top: 20px;width: 160px;height: 160px;" src="xiaomi/a1.jpg">
                        </div>
                        <div style="font-size: 14px;color: #212121;">
                            红米6A
                        </div>
                        <div style="font-size: 12px;height: 18px;line-height: 18px; color: #b0b0b0;margin-top: 5px;">
                            Ai人脸解锁，小巧全面屏
                        </div>
                        <div style="font-size: 14px;margin-top: 15px;">
                            <a style="color: #ff6709;">599&nbsp;元</a>
                        </div>
                    </div>
                    <div class="aaj" style="margin-left: 14px;">
                        <div>
                            <img style="margin-top: 20px;width: 160px;height: 160px;" src="xiaomi/a2.jpg">
                        </div>
                        <div style="font-size: 14px;color: #212121;">
                            小米8&ensp;6GB+64GB
                        </div>
                        <div style="font-size: 12px;height: 18px;line-height: 18px; color: #b0b0b0;margin-top: 5px;">
                            全球首款双频GPS，骁龙845处理器
                        </div>
                        <div style="font-size: 14px;margin-top: 15px;">
                            <a style="color: #ff6709;">2699&nbsp;元</a>
                        </div>
                    </div>
                    <div class="aaj" style="margin-left: 14px;">
                        <div>
                            <img style="margin-top: 20px;width: 160px;height: 160px;" src="xiaomi/a3.jpg">
                        </div>
                        <div style="font-size: 14px;color: #212121;">
                            红米6A
                        </div>
                        <div style="font-size: 12px;height: 18px;line-height: 18px; color: #b0b0b0;margin-top: 5px;">
                            Ai人脸解锁，小巧全面屏
                        </div>
                        <div style="font-size: 14px;margin-top: 15px;">
                            <a style="color: #ff6709;">599&nbsp;元</a>
                        </div>
                    </div>
                    <div class="aaj" style="margin-left: 14px;">
                        <div>
                            <img style="margin-top: 20px;width: 160px;height: 160px;" src="xiaomi/a4.jpg">
                        </div>
                        <div style="font-size: 14px;color: #212121;">
                            红米6A
                        </div>
                        <div style="font-size: 12px;height: 18px;line-height: 18px; color: #b0b0b0;margin-top: 5px;">
                            Ai人脸解锁，小巧全面屏
                        </div>
                        <div style="font-size: 14px;margin-top: 15px;">
                            <a style="color: #ff6709;">599&nbsp;元</a>
                        </div>
                    </div>


                </div>
                <div>
                    <div class="aaj" style="margin-top: 14px;">
                        <div style="top: 0px;width:64px;height:20px;margin-left: 85px; font-size:12px;line-height:20px;color:#fff;background-color:#e53935;">减200元</div>
                        <div>
                            <img style="margin-top: 0px;width: 160px;height: 160px;" src="xiaomi/a5.jpg">
                        </div>
                        <div style="font-size: 14px;color: #212121;">
                            红米6A
                        </div>
                        <div style="font-size: 12px;height: 18px;line-height: 18px; color: #b0b0b0;margin-top: 5px;">
                            Ai人脸解锁，小巧全面屏
                        </div>
                        <div style="font-size: 14px;margin-top: 15px;">
                            <a style="color: #ff6709;">599&nbsp;元</a>
                        </div>
                    </div>
                    <div class="aaj" style="margin-top: 14px;margin-left: 14px;">
                        <div style="top: 0px;width:64px;height:20px;margin-left: 85px; font-size:12px;line-height:20px;color:#fff;background-color:#e53935;">享6折</div>
                        <div>
                            <img style="margin-top: 0px;width: 160px;height: 160px;" src="xiaomi/a6.jpg">
                        </div>
                        <div style="font-size: 14px;color: #212121;">
                            红米6A
                        </div>
                        <div style="font-size: 12px;height: 18px;line-height: 18px; color: #b0b0b0;margin-top: 5px;">
                            Ai人脸解锁，小巧全面屏
                        </div>
                        <div style="font-size: 14px;margin-top: 15px;">
                            <a style="color: #ff6709;">599&nbsp;元</a>
                        </div>
                    </div>
                    <div class="aaj" style="margin-top: 14px;margin-left: 14px;">
                        <div style="top: 0px;width:64px;height:20px;margin-left: 85px; font-size:12px;line-height:20px;color:#fff;background-color:#e53935;">减100元</div>
                        <div>
                            <img style="margin-top: 0px;width: 160px;height: 160px;" src="xiaomi/a7.jpg">
                        </div>
                        <div style="font-size: 14px;color: #212121;">
                            红米6A
                        </div>
                        <div style="font-size: 12px;height: 18px;line-height: 18px; color: #b0b0b0;margin-top: 5px;">
                            Ai人脸解锁，小巧全面屏
                        </div>
                        <div style="font-size: 14px;margin-top: 15px;">
                            <a style="color: #ff6709;">599&nbsp;元</a>
                        </div>
                    </div>
                    <div class="aaj" style="margin-top: 14px;margin-left: 14px;">
                        <div style="top: 0px;width:64px;height:20px;margin-left: 85px; font-size:12px;line-height:20px;color:#fff;background-color:#e53935;">享8折</div>
                        <div>
                            <img style="margin-top: 0px;width: 160px;height: 160px;" src="xiaomi/a8.jpg">
                        </div>
                        <div style="font-size: 14px;color: #212121;">
                            红米6A
                        </div>
                        <div style="font-size: 12px;height: 18px;line-height: 18px; color: #b0b0b0;margin-top: 5px;">
                            Ai人脸解锁，小巧全面屏
                        </div>
                        <div style="font-size: 14px;margin-top: 15px;">
                            <a style="color: #ff6709;">599&nbsp;元</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div>
            <img src="xiaomi/10.jpg" width="1226px" style="margin-top: 39px;margin-bottom: 39px;">
        </div>

    </div>
</div>
<div id="jiewei" style="height: 438px;">
    <div style="width: 1226px;position: relative;margin: 0 auto">
        <div style="height: 272px;text-align: center;">
            <div style="height: 80px;line-height: 80px;color: #616161;font-size: 16px;">
                <ul>
                    <li style="list-style: none;float: left;height: 25px;width:19.9%;line-height: 25px;border-right:#E0E0E0 1px solid;"><i class="iconfont">&#xe614;</i> 预约维修服务</li>
                    <li style="list-style: none;float: left;height: 25px;width:19.9%;line-height: 25px;border-right:#E0E0E0 1px solid;"><i class="iconfont">&#xe67d;</i> 7天无理由退货</li>
                    <li style="list-style: none;float: left;height: 25px;width:19.9%;line-height: 25px;border-right:#E0E0E0 1px solid;"><i class="iconfont">&#xe607;</i> 15天免费换货</li>
                    <li style="list-style: none;float: left;height: 25px;width:19.9%;line-height: 25px;border-right:#E0E0E0 1px solid;"><i class="iconfont">&#xe611;</i> 满150元包邮</li>
                    <li style="list-style: none;float: left;height: 25px;width:20%;line-height: 25px;"><i class="iconfont">&#xe612;</i>520余家售后网点</li>
                </ul>
            </div>
            <div style="height: 192px;">

            </div>
        </div>
        <div style="height: 166px;">

        </div>
    </div>

</div>